<!--
页面级的组件做数据交互（ajax）
子组件内只维护UI和功能

props 父 => 子组件传值(严格的单项数据流 父 => 子)
父组件 自定义属性传值
子组件 props中接受
 -->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <BlogPost
      :title="article.title"
      :likes="article.likes"
      :content="article.content"
      :publish-at="article.publishAt"
    />

<!--
  :person="{
        name: '张三',
        age: 18
      }"-->
  </div>
</template>

<script>
import BlogPost from './components/BlogPost'

export default {
  name: 'App1',
  components: {
    BlogPost
  },
  data() {
    return {
      msg: 'hello props',
      article: {
        title: '我是一篇文章的标题',
        likes: 66,
        author: '张狗蛋',
        publishAt: '2021-7-7',
        comments: [
          '我是第一条评论',
          '我是第二条评论',
          '我是第三条评论',
          '我是第四条评论',
          '我是第五条评论',
        ],
        content: `
      <p>我是第一段话</p>
      <hr>
      <p>我是第二段话</p>
      <a href="">百度</a>
      <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
      `
      }
    }
  },
  created() {
    // ajax
  }
}
</script>